 * Narro is an application that allows online software translation and maintenance.
 * Copyright (C) 2008 Alexandru Szasz <alexxed@gmail.com>
 * http://code.google.com/p/narro/
 *
 * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public
 * License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any
 * later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
 * implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along with this program; if not, write to the
 * Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
 */

body {
    font-family:verdana,arial,tahoma,sans-serif;
    margin: 5px;
}
.title { font-weight: bold; margin-left: -2px;}
.title_action { font-weight: bold; margin-bottom: -4px; }
.warning { color: #ff0000; }
.instructions { font-size:0.8em; font-style: italic; color: #888888}
.item_divider { line-height: 16px; }
.item_label { padding-bottom: 4px; }
.item_label_disabled { padding-bottom: 4px; color: #999999; }

.button {  }
.listbox {  }
.textbox {  }

.paginator_inactive_step { font-weight: bold; color: #aaaaaa; }
.paginator_active_step { font-weight: bold; color: #000000; text-decoration: none; }
.paginator_page { text-decoration: none; color: #000000; padding: 0px 3px 0px 3px; }
.paginator_selected_page { font-weight: bold; background-color: #ddccff; padding: 0px 3px 0px 3px; border: 1px; border-style: solid; }

.dashboard_top {width: 854px; margin-left: 170px; color: #000066; font: 30px 'Verdana','Arial','Helvetica','Sans-Serif'; font-weight: bold; height: 40px;}
.dashboard_pane {float: left; width: 160px;}
.dashboard_left {float: left; background-color: #eeeeff; width: 400px; height: 500px; margin-left: 10px; border-width: 1px; border-style: solid; border-color: black; padding: 10px; overflow: auto;}
.dashboard_right {float: left; background-color: #eeeeff; width: 400px; height: 500px; margin-left: 10px; border-width: 1px; border-style: solid; border-color: black; padding: 10px; overflow: auto;}

.file_asset_dbox { border: 1px solid #1c4a8c; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }
.file_asset_dbox h1 { margin: 0; }
.file_asset_dbox input { padding: 3px; margin-right: 5px; }

.dotted_box { border:1px dotted black;}
.dotted_box_title { display:block; background-color: #A5F7A5; font-weight:bold; padding:2px; }
.dotted_box_content { padding:5px; }

a:link, a:visited {
  color: #557D0C;
  text-decoration: none;
}
a:hover {
  color: #000000;
  text-decoration: underline;
}
a:active, a.active {
  color: #6c871d;
}

td, th{
    text-align: left;
}

th.dtg_header_row a {
    color: black;
}

div.graph {
border:0px solid black;
height:20px;
position:relative;
width:160px;
}

div.graph img {
    background-repeat: repeat-x;
}

div.translated {
background:transparent url(../images/green-bar.png) repeat-x scroll 0pt 50%;
height:100%;
left:0%;
position:absolute;
top:0px;
}

div.fuzzy {
background:transparent url(../images/orange-bar.png) repeat-x scroll 0pt 50%;
height:100%;
position:absolute;
top:0px;
}

div.untranslated {
background:transparent url(../images/red-bar.png) repeat-x scroll 0pt 50%;
height:100%;
position:absolute;
top:0px;
}

#header {
    text-align:right;
    width:100%;
}

th.datagrid_header {
    color: #000000;
    font-weight: bold;
    text-align: left;
}

div.breadcrumb {
    background: #DEDEDE url(../images/bg_td1.jpg) repeat-x;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    text-align: left;
    border: 1px solid #DEDEDE;
}

th.datagrid_header a{
    color: #000000;
}

th.datagrid_header a:hover{
    color: #000000;
}

tr.datagrid_even {
    background: url(../images/bg_td1.jpg) repeat-x top;
}
tr.datagrid_odd {
    background: #FFFFFF url(../images/bg_td1.jpg) repeat-x;
}

tr.selected {
    background: #D0FAD0 url(../images/bg_td3.jpg) repeat-x;
}

.white3dbg {
    background: #FFFFFF url(../images/bg_td1.jpg) repeat-x;
}

.green3dbg {
    background: #A5F7A5;
}

tbody th.datagrid_row,td.datagrid_row {
    line-height: 1.4em;
    font-family: Arial, Helvetica, sans-serif;
    color: #777777;
    padding: 10px 7px;
    border-top: 1px solid #DEDEDE;
    text-align: left;
}
td.datagrid_row a {
    color: #777777;
    font-weight: bold;
    text-decoration: underline;
}
td.datagrid_row a:hover {
    color: #F8A704;
    text-decoration: underline;
}
th.datagrid_footer {
    background: url(../images/bg_total.jpg) repeat-x bottom;
    color: #FFFFFF;
    height: 30px;
}

td.datagrid_footer {
    background: url(../images/bg_total.jpg) repeat-x bottom;
    color: #FFFFFF;
    height: 30px;
}

.ltr {
    direction: ltr;
    text-align: left;
}

.rtl {
    direction: rtl;
    text-align: right;
}

.mispelled_word {
    color: red;
    background-color:white;
    font-weight:bold;
}

.mispelled_suggestion {
    color:green;
    background-color:white;
    font-weight:bold;
}

.whitespace {
    background-color:white;
    margin-right:2px;
}

.section_title {
    background: #DEDEDE url(../images/bg_td1.jpg) repeat-x;
    padding: 4px;
    text-align: left;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    border-top: 1px solid #DEDEDE;
    border-bottom: 1px dotted #DEDEDE;
    font-weight: bold;
    color: #000000;
}

.section {
    padding: 4px;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    border-bottom: 1px solid #DEDEDE;
    margin-bottom: 4px;
}

/**
  * Various QControl-specific Styles
  */

/* QFileAsset */
div.fileassetDbox { border: 4px solid #111; background-color: #EFEEEE; padding: 20px; width: 400px; overflow: auto; }
    div.fileassetDbox h1 { margin: 0; }
    div.fileassetDbox input { padding: 3px; margin-right: 5px; }

/* QDialogBox */
div.dialogbox { border: 4px solid #111; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }

/* QDateTimePicker */
span.datetimepicker { }
    span.datetimepicker select { font: 12px 'Arial', 'Helvetica'; background-color: #F6F6F6; border: 1px solid #111; }
    span.datetimepicker select:focus { background-color: #fff; border-color: #780000; }
    span.datetimepicker select.month { width: 55px; }
    span.datetimepicker select.day { width: 45px; margin-left: 8px; }
    span.datetimepicker select.year { width: 60px; margin-left: 8px; }
    span.datetimepicker select.hour { width: 65px; margin-left: 12px; margin-right: 2px; }
    span.datetimepicker select.minute { width: 45px; margin-left: 2px; margin-right: 2px; }
    span.datetimepicker select.second { width: 45px; margin-left: 2px; }

/* QDataGrid */
table.datagrid { border: 1px solid #BDD4B3; width:100%; overflow:auto;}
    table.datagrid caption, table.datagrid tfoot { padding-bottom: 4px; overflow: auto; }
        table.datagrid span.left { float: left; display: block; }
        table.datagrid span.right { float: right; display: block; }
    table.datagrid tr { }
        table.datagrid tr.alternate {  }
    table.datagrid th {
    padding: 3px 5px 3px 5px; text-align: left; color:#000;
    background:none repeat scroll 0 0 #D4EDC9;
    border-bottom:1px solid #BDD4B3;
    }
        table.datagrid th a { color: #557D0C; text-decoration: none; }
        table.datagrid th a:hover { color: #000; text-decoration: underline;}
    table.datagrid td { padding: 5px; border-bottom:1px solid #DEDEDE;}
        table.datagrid td a { color: #557D0C; }
        table.datagrid td a:hover { color: #000; text-decoration: underline;}
    table.datagrid tfoot td {border:0 none}
    table.datagrid caption {border-top:1px solid #BDD4B3;border-right:1px solid #BDD4B3;border-left:1px solid #BDD4B3;}

/* QPaginator */
span.paginator { margin: 0; padding: 0; }
    span.paginator span { list-style-type:none; display: inline; padding: 0; margin: 0; }
        span.paginator span.page a { text-decoration: none; color: #000000; padding: 0 3px 0 3px; margin: 0 2px 0 2px;}
        span.paginator span.page a:hover { background-color: #F6F6F6; }
        span.paginator span.arrow { font-weight: bold; color: #ccc; margin: 0; padding: 0 3px 0 3px; }
        span.paginator span.arrow a { font-weight: bold; color: #000; text-decoration: none; }
        span.paginator span.selected { font-weight: bold; background-color: #F6F6F6; padding: 0 3px 0 3px; margin: 0 2px 0 2px; border: 1px; border-style: solid; }
        span.paginator span.break { color: #780000; margin: 0 5px 0 5px; }
        span.paginator span.ellipsis { color: #780000; }

/* QCalendar */
div.calendar { width: 200px; border: 1px solid #111; background-color: #ccf; }
    div.calendar div.navigator { background-color: #111; overflow: auto; height: 100%; color: #fff; padding: 2px 6px 2px 6px; }
    div.calendar div.navigator div.left { float: left; }
    div.calendar div.navigator div.month { float: left; width: 80px; text-align: center; font-weight: bold; font-size: 11px; }
    div.calendar div.navigator div.year { float: right; }
    div.calendar div.navigator div.year span { font-size: 11px; font-weight: bold; margin-left: 6px; margin-right: 6px; }
        div.calendar div.navigator a { color: #fff; text-decoration: none; }
        div.calendar div.navigator a:hover { text-decoration: underline; }
    div.calendar table { border: 0; margin-left: auto; margin-right: auto;}
        div.calendar th { text-align: center; border: 0; padding: 4px 2px 4px 2px; font-weight: bold; font-size: 10px;}
        div.calendar td { text-align: center; border-width: 0 0 1px 0; border-style: solid; border-color: black; padding: 0;}
            div.calendar td.lastRow { border-width: 0;}
            div.calendar td a { text-decoration: none; color: #000; display: block; padding: 2px 6px 2px 6px; }
            div.calendar td.today { background-color: #ccc; }
            div.calendar td.nonMonth a { color: #780000; }
            div.calendar td.selected { background-color: #c9a; font-weight: bold; }
            div.calendar td a:hover { background-color: #F6F6F6; color: #000; }
    div.calendar div.options { text-align: center; background-color: #111; }
        div.calendar div.options a { color: #fff; text-decoration: none;}
        div.calendar div.options a:hover { text-decoration: underline; }

/**
  * Styles for Custom Render Functions as defined in QControl.class.php
  */

div.renderWithName { padding: 4px 0 4px 0; overflow: auto; height: 100%; }
    div.renderWithName div.left { float: left; width: 200px; margin-right: 25px; }
    div.renderWithName div.required { font-weight: bold; text-transform: uppercase; }
    div.renderWithName div.left span.instructions { color: #999; font-style: italic; text-transform: none;}

    div.renderWithName div.right { }
    div.renderWithName div.right span.error { margin-left: 15px; color: #600;}

/**
  *   Layout Specific IDs
  */

#page {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    height: 100%;
    margin:0px auto;
    padding:0px;
    text-align:center;
}

#header { border-bottom:3px solid #111;background-color: #780000; color: #ffffff; height:50px; width:100%; text-align:left; }
    #headerLeft {  width: 49%; float:left; padding-left:1%;}
        #pageName { height:24px; font-size:14px; line-height:24px; font-weight:bold; }
        #categoryName, #codeVersion { height:12px; line-height:12px; font-size:10px; }
        #pageLinks { height:12px; line-height:12px; font-size:10px; }
        .headerGray {font-style:italic;}
    #headerRight { width: 49%; text-align: right; float:right; padding-right:1%;}
        #viewSource, #closeWindow { height:36px; line-height:36px; font-size:16px;}
            #viewSource a, #closeWindow a { font-size:16px; font-weight:bold; color:#FFF;}
        #willOpen { height:12px; line-height:12px; font-size:10px; font-style:italic;}
    .headerSmall { font-size: 10px;}
    a.headerLink:link, a.headerLink:visited { color: #FFF;}
    a.headerLink:active, a.headerLink:hover { color: #F6F6F6; text-decoration:underline;}

#content { padding: 10px; clear:both; float:none; width:960px; margin:0px auto 50px auto;text-align:left;}
    a.bodyLink { color: #780000; }

div#draftList { }
    div#draftList h1 { margin: 0; font: 20px 'Georgia', 'Times New Roman', 'Times'; font-weight: bold; }
    div#draftList p { margin-top: 6px; margin-bottom: 18px;}

div#formControls { padding: 0 0 0 20px; }

div#formActions { background-color: #780000; padding: 10px; height: 20px; margin-top: 18px; border:1px solid #111; }
    div#formActions div#save { float: left; }
    div#formActions div#cancel { margin-left: 10px; float: left; }
    div#formActions div#delete { float: right; }
#pageTitle { float:left; width:49%; height:20px; line-height:20px; font-size:16px; font-weight:bold;}
#formDraftLink { float:right; width:49%; height:20px; line-height:20px; font-size:14px; text-align:right;}
div#dashboard { clear:both; }
    div#dashboard div#left { float: left; width: 200px; height: 100px; background-color: #F6F6F6; border: 1px solid #111; padding: 5px; }
    div#dashboard div#right { float: left; margin-left: 10px; width: 738px;}
    div#dashboard div#right div#pnlList { margin-bottom: 10px; border: 1px solid #111; padding: 5px; max-height: 300px; overflow: auto; }
    div#dashboard div#right div#pnlEdit { border: 1px solid #111; padding: 5px; background-color: #F6F6F6; max-height: 240px; overflow: auto; }

#footer {
    position: absolute;
    bottom: 0pt;
    left: 0pt;
    clear: both;
    background-color: #780000;
    color: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height:39px;
    width:100%;
    text-align:left;
    border-top: 3px solid #111;
}
    #footerLeft {  width: 150px; float:left; height:35px; padding-left:5px; padding-top: 4px;}
        #footerLeft a img { border: 0px;}
    #footerRight { width: 50%; text-align: right; float:right; padding-right:5px;}
        #footerRight div { height:18px; line-height: 18px; }
    .footerSmall { line-height: 18px;}
    a.footerLink { background-color:#780000; color: #FFF; border-bottom: 1px dotted #FFF;}

p.create { }
    p.create a { text-decoration: none; color: #780000; font-weight: bold; }
    p.create a:hover { text-decoration: underline; }

.code { background-color: #F6F6F6; padding:10px; font: 11px 'Lucida Console', 'Courier New', 'Courier', monospaced; overflow: auto; width: 98%; max-height: 560px;}
.codeDisplay {background-color: #F6F6F6; width: 400px; height: 400px; overflow: auto; margin: 10px; padding: 10px;}

/**
.instructions { background-color: #F6F6F6; padding: 20px; margin:20px auto; line-height: 20px; max-height: 300px; width:90%; overflow: auto; text-align:left;border:1px solid #111;}
.instruction_title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 22px; font-weight: bold; color: #780000; margin-bottom: 20px;}
*/

.main_navigator { text-align: center; background-color: #111; padding: 5px 20px; color: #ffcc99; width:90%; margin:auto;border:1px solid #111;}
a.main_navlink { color: #EEE; font-weight: normal; }
a.main_navselected { color: #ffffff; font-weight: bold; text-transform: uppercase; }
.main_info {font: 12px Verdana, Arial, Helvetica, sans-serif; padding: 5px 20px; width:90%; background-color: #E6E6E6; margin:auto; border:1px solid #111;}
#part1 blockquote, #part2 blockquote, #part3 blockquote { width:90%; padding:5px 20px;margin:10px auto;}
#part1 blockquote ul, #part2 blockquote ul, #part3 blockquote ul { width:90%; padding:2px 20px;margin:5px auto;}

.warning { color: #aa0000; }

.paginator_inactive_step { font-weight: bold; color: #aaaaaa; }
.paginator_active_step { font-weight: bold; color: #000000; text-decoration: none; }
.paginator_page { text-decoration: none; color: #000000; padding: 0px 4px 0px 4px; }
.paginator_selected_page { font-weight: bold; background-color: #ddccff; padding: 0px 4px 0px 4px; border: 1px; border-style: solid; }

.treenav_item {cursor: pointer; padding: 2px; font: 10px verdana; color:#111}
.treenav_item_selected {background-color: #780000; color: #FFF;}
.treenav_item_hover {background-color: #F6F6F6; color:#000}

.renamer_item { padding: 2px; cursor: pointer; }
.renamer_item_selected { background-color: #F6F6F6; }

.textbox_panel { padding: 10px 0px 10px 0px; width: 300px; height: 250px; background-color: #F6F6F6; text-align: center; }

.top_nav { font: 13px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif; color: #F6F6F6; }

.top_nav_selected { font: 13px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif; font-weight: bold; color: #FFF; }
.top_member_nav { font: 10px 'Trebuchet MS', 'Arial', 'Helvetica', sans-serif; color: white; }



.selectedStyle {background-color: #FFF;}
.treenav {background-color: #FFF; width: 300px; height: 400px; overflow: auto; margin:10px; padding: 10px;}


.data_repeater_example {background-color:#eeffdd;padding:10px;width:200px;border:1px solid #111;float:left;margin:5px;}
.tc {width: 200px; height: 100px; border: 1px solid #780000; color: #111; font: 20px arial; font-weight: bold; text-align: center; vertical-align: middle;}

.panelDefault {width:400px;height:400px;background-color:#efefef;border-width:1px;border-style:solid;float:left;overflow:auto;}
.panelRight {margin-left: 5px;}
.projectTitle {font: 24px Georgia, Times New Roman, Serif; font-weight: bold; width: 100%;}

.file_asset_dbox { border: 1px solid #111; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }
.file_asset_dbox h1 { margin: 0; }
.file_asset_dbox input { padding: 3px; margin-right: 5px; }

.file_asset a {color: #111;}
.file_asset_icon {border-width: 2px; border-style: solid; border-color: #111;}

span.error {
    background-image: url('../images/errorIcon.png');
    background-position: 0 2px;
    background-repeat:no-repeat;
    padding-left:18px;
    color: red;
}

span.info {
    background-image: url('../images/infoIcon.png');
    background-position: 0 2px;
    background-repeat:no-repeat;
    padding-left:18px;
}
span.warning {
    background-image: url('../images/warningIcon.png');
    background-position: 0 2px;
    background-repeat:no-repeat;
    padding-left:18px;
}